<template>
  <view
      class="tag"
      :class="bgClass"
  >
    {{ tagObj.name }}
  </view>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  id: [String, Number]
})

/* 写死也行，外面 import 也行 */
const workCardTag = [
  { name: '直', color: '#247bf1', id: 0 },
  { name: '急', color: '#f93e0a', id: 1 },
  { name: '￥', color: '#ffb700', id: 2 }
]

const tagObj = computed(() =>
    workCardTag.find(item => item.id === props.id) || {}
)

/* 关键：只返回 class 名 */
const bgClass = computed(() => `tag-bg--${props.id}`)
</script>

<style lang="scss" scoped>
.tag {
  display: inline-block;
  padding: 4rpx 8rpx;
  border-radius: 6rpx;
  font-size: 22rpx;
  color: #fff;
  margin-right: 10rpx;
}

.tag-bg--0 { background: #247bf1; }
.tag-bg--1 { background: #f93e0a; }
.tag-bg--2 { background: #ffb700; }
</style>